<template>
  <div class="pane-phone">
    <el-form ref="phoneFormRef" :model="phoneForm" :rules="phoneRules" label-width="80px">
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="phoneForm.phoneNumber" />
      </el-form-item>
      <el-form-item label="验证码" prop="verifycode">
        <div class="verify-code">
          <el-input v-model="phoneForm.verifycode" />
          <el-button class="get-btn" type="primary">获取验证码</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// 这边的逻辑没写

import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

import type { IphoneLogin } from '@/types'
import { localCache } from '@/utils/cache'

const CACHE_PHONENUMBER = 'phoneNumber'
const CACHE_VERIFYCODE = 'verifycode'

const phoneFormRef = ref<FormInstance>()
const phoneForm = ref<IphoneLogin>({
  phoneNumber: localCache.getCache(CACHE_PHONENUMBER) ?? '',
  verifycode: localCache.getCache(CACHE_VERIFYCODE) ?? '',
})
const phoneRules = reactive<FormRules<IphoneLogin>>({
  phoneNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '必须是6~20位数字或字母组合', trigger: 'blur' },
  ],
  verifycode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{3,}$/, message: '必须是3位以上数字或字母组合', trigger: 'blur' },
  ],
})
</script>

<style scoped lang="less">
.pane-phone {
  color: red;
  .verify-code {
    display: flex;
    .get-btn {
      margin-left: 8px;
    }
  }
}
</style>
